<template>
  <div class="container">
    <div class="dialog">
      <el-dialog
        :title="title"
        :visible.sync="showDialog"
        @close="closeDialog"
        width="420px"
      >
        <!-- 弹框表单 -->
        <el-form
          ref="formDialog"
          :model="formDialog"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="所属学科" prop="subjectID" v-if="!subjectID">
            <el-select v-model="formDialog.subjectID" placeholder="请选择">
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="directoryName">
            <el-input
              v-model="formDialog.directoryName"
              placeholder="请输入目录名称"
            ></el-input>
          </el-form-item>
          <el-form-item class="button">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="submitDialog">确认</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/directorys'
// 导入封装的方法 获取学科列表
import { simple } from '@/api/hmmm/subjects'
export default {
  props: {
    subjectID: {
      default: null,
      type: Number
    },
    getList: {
      type: Function,
      require: true
    },
    empty: {
      require: true,
      type: Function
    }
  },
  data () {
    return {
      // 弹框开关
      showDialog: false,
      // 弹框标题
      title: '',
      // 弹框表格数据
      formDialog: {
        subjectID: this.subjectID,
        directoryName: null
      },
      // 弹框表单验证
      rules: {
        subjectID: [
          {
            required: true,
            message: '请选择学科',
            trigger: 'change'
          }
        ],
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 学科列表数据
      subjectList: []
    }
  },
  created () {
    // 调用获取学科列表数据的方法
    this.getSubjectLise()
  },
  methods: {
    // 弹框表单提交
    submitDialog () {
      // 整体验证
      this.$refs.formDialog.validate(async valid => {
        if (valid) {
          if (this.title === '新增目录') {
            // 发送请求 添加目录
            await add(this.formDialog)
            // 提示信息
            this.$message.success('添加成功')
          }
          if (this.title === '修改目录') {
            // 发送请求 添加目录
            await update(this.formDialog)
            // 提示信息
            this.$message.success('修改成功')
          }
          // 重新获取列表
          // this.getList()
          // 关闭弹框
          this.closeDialog()
          // 清除筛选表单数据 并重新获取列表
          this.empty()
        }
      })
    },
    // 获取学科列表
    async getSubjectLise () {
      // 发送请求获取数据
      const { data } = await simple()
      // 将数据存储到data中
      this.subjectList = data
    },
    // 关闭弹框方法
    closeDialog () {
      // 关闭弹框
      this.showDialog = false
      // 重置数据
      this.formDialog = {
        subjectID: this.subjectID,
        directoryName: null
      }
      // 重置表单
      this.$refs.formDialog.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
// 弹框
.dialog {
  .el-select,
  .el-input {
    width: 300px;
  }

  .button {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
    margin-bottom: 0;
  }
}
</style>
